<template>
<div class="goodsListContainer clearfix">
    <ul>
        <li class="listContainerLi" v-for="item in classList.list" :key="item.id">
            <div class="listC clearfix" :class="item.class">
                <!-- 标题部分 -->
                <div class="listTitleDiv">
                    <h1>{{ item.title }}</h1>
                    <span>|</span>
                    <ul class="categoryRecommendation">
                        <li v-for="element in item.hotRecommendation" :key="element.id">
                            <span>   </span>
                            <!-- <router-link to="#" :style="{color: '#666666',}">{{ element.title }}</router-link> -->
                            <a @click="goToGoodsDetail(element.id)" :style="{color: '#666666',cursor: 'pointer'}">{{ element.title }}</a>
                        </li>
                    </ul>
                    <router-link to="#" class="more fr" :style="{color: '#666666','margin-top': '25px'}">查看更多>></router-link>
                </div>

                <div class="dd clearfix" :style="{height: '300px',float: 'left'}">
                    <!-- 分类图片 -->
                    <div class="categoryIcon fl" :style="{background:'url(' + item.icon  + ')'}"></div>
                    
                    <div class="goodsListDiv">
                        <ul>
                            <li v-for="goods in item.goodsList" :key=goods.id>
                                <div class="goodsConDiv" @click="goToGoodsDetail(goods)">
                                    <h4>{{goods.title }}</h4>
                                     <el-image class="goodsIconDiv" :src="goods.icon" :fit="'cover'">
                                     </el-image>
                                    <h1> ￥{{ goods.price}}</h1>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
</template>

<script>
export default {
    name:'goodsListContainer',
    data(){
        return {
            "classList":Object
        }
    },
    props:{

    },
    created(){
        //获取静态数据
        this.axios.get("./testData/data.json").then((response) => {
             this.classList = response.data
        })
    },
    methods:{
        goToGoodsDetail(goods){
            this.$emit('toGoodsDetail',goods);
        }
    }
    
}
</script>

<style>
.goodsListContainer{
    position: relative;
    text-align: center;
    margin:0 auto;
}

.listTitleDiv{
    height: 50px;
    border-bottom: 2px solid #47aa34;
    background-color: white;
}

.listTitleDiv h1{
    color: #47aa34;
    font-weight: bold;
    font-size:15px;
    float: left;
    margin-top: 23px;
}

.listTitleDiv span{
    float: left;
    margin-top: 26px;
    margin-left: 15px;
}

.categoryRecommendation li{
    margin-top: 25px;
}

.goodsListDiv{
    width: 976px;
    height:300px;
    margin-left: 200px;
    border-bottom: 1px solid #ededed;
}

.goodsListDiv li{
    height: 300px;
    border-right: 1px solid #ededed;
}

.listC li{
    float: left;
}

.categoryIcon{
    width:200px;
    height:300px;
}

.goodsConDiv{
    width:243px;
    height:300px;
    cursor: pointer;
}

.goodsConDiv h4{
    margin-top:20px;
    height:50px;
    width: 100%;
}

.goodsConDiv h1{
    margin-top:10px;
    font-size:18px;
    font-weight:bold;
    color: #c40000;
    text-align: center;
}

.goodsIconDiv{
    width:180px;
    height:180px;
    display: block;
    margin:auto;
}
</style>

